<template>
	<view class="appointment-container">
		<!-- 顶部搜索栏 -->
		<view class="search-section">
			<view class="search-bar">
				<text class="iconfont icon-search"></text>
				<input 
					class="search-input" 
					type="text" 
					placeholder="搜索科室或医生"
					v-model="searchKeyword"
					@input="onSearchInput"
					@confirm="performSearch"
				/>
				<text class="iconfont icon-clear" v-if="searchKeyword" @click="clearSearch"></text>
			</view>
		</view>

		<!-- 快速挂号 -->
		<view class="quick-appointment" v-if="!showSearchResults">
			<view class="section-title">快速挂号</view>
			<view class="quick-grid">
				<view class="quick-item" v-for="item in quickDepartments" :key="item.id" @click="selectDepartment(item)">
					<view class="quick-icon" :style="{ backgroundColor: item.color }">
						<text class="iconfont" :class="item.icon"></text>
					</view>
					<view class="quick-name">{{ item.name }}</view>
					<view class="quick-status" :class="item.status">
						{{ getStatusText(item.status) }}
					</view>
				</view>
			</view>
		</view>

		<!-- 搜索结果 -->
		<view class="search-results" v-if="showSearchResults">
			<view class="results-header">
				<view class="results-title">搜索结果</view>
				<view class="results-count">{{ searchResults.length }}个结果</view>
			</view>
			<view class="results-list">
				<view class="result-item" v-for="result in searchResults" :key="result.id" @click="selectSearchResult(result)">
					<view class="result-info">
						<view class="result-name">{{ result.name }}</view>
						<view class="result-desc">{{ result.description }}</view>
						<view class="result-tags">
							<text class="tag" v-for="tag in result.tags" :key="tag">{{ tag }}</text>
						</view>
					</view>
					<view class="result-action">
						<view class="result-status" :class="result.status">{{ getStatusText(result.status) }}</view>
						<text class="iconfont icon-arrow-right"></text>
					</view>
				</view>
			</view>
		</view>

		<!-- 科室分类 -->
		<view class="department-section" v-if="!showSearchResults">
			<view class="section-title">科室分类</view>
			<view class="category-tabs">
				<view 
					class="category-tab" 
					v-for="category in departmentCategories" 
					:key="category.id"
					:class="{ 'active': currentCategory === category.id }"
					@click="switchCategory(category.id)"
				>
					{{ category.name }}
				</view>
			</view>
			<view class="department-list">
				<view class="department-item" v-for="dept in currentDepartments" :key="dept.id" @click="selectDepartment(dept)">
					<view class="dept-info">
						<view class="dept-name">{{ dept.name }}</view>
						<view class="dept-desc">{{ dept.description }}</view>
						<view class="dept-stats">
							<text class="stat-item">今日{{ dept.todayCount }}人</text>
							<text class="stat-item">均{{ dept.avgWaitTime }}分钟</text>
						</view>
					</view>
					<view class="dept-status">
						<view class="status-badge" :class="dept.status">
							{{ getStatusText(dept.status) }}
						</view>
						<view class="wait-time" v-if="dept.estimatedWait">
							预计{{ dept.estimatedWait }}分钟
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 我的预约 -->
		<view class="my-appointments" v-if="!showSearchResults && myAppointments.length > 0">
			<view class="section-header">
				<view class="section-title">我的预约</view>
				<view class="more-btn" @click="viewAllAppointments">
					<text>查看全部</text>
					<text class="iconfont icon-arrow-right"></text>
				</view>
			</view>
			<view class="appointment-list">
				<view class="appointment-item" v-for="appointment in myAppointments.slice(0, 2)" :key="appointment.id" @click="viewAppointmentDetail(appointment)">
					<view class="appointment-time">
						<view class="date">{{ formatDate(appointment.date) }}</view>
						<view class="time">{{ appointment.timeSlot }}</view>
					</view>
					<view class="appointment-info">
						<view class="doctor-name">{{ appointment.doctorName }}</view>
						<view class="department">{{ appointment.departmentName }}</view>
						<view class="location">{{ appointment.location }}</view>
					</view>
					<view class="appointment-status" :class="appointment.status">
						{{ getAppointmentStatusText(appointment.status) }}
					</view>
				</view>
			</view>
		</view>

		<!-- 就医提醒 -->
		<view class="reminder-section" v-if="!showSearchResults && todayReminders.length > 0">
			<view class="section-title">今日提醒</view>
			<view class="reminder-list">
				<view class="reminder-item" v-for="reminder in todayReminders" :key="reminder.id" @click="handleReminder(reminder)">
					<view class="reminder-icon" :class="reminder.type">
						<text class="iconfont" :class="getReminderIcon(reminder.type)"></text>
					</view>
					<view class="reminder-content">
						<view class="reminder-title">{{ reminder.title }}</view>
						<view class="reminder-desc">{{ reminder.description }}</view>
						<view class="reminder-time">{{ reminder.time }}</view>
					</view>
					<view class="reminder-action">
						<text class="action-text">{{ reminder.actionText }}</text>
						<text class="iconfont icon-arrow-right"></text>
					</view>
				</view>
			</view>
		</view>

		<!-- 科室详情弹窗 -->
		<uni-popup ref="departmentPopup" type="bottom">
			<view class="department-detail" v-if="selectedDepartment">
				<view class="detail-header">
					<view class="detail-title">{{ selectedDepartment.name }}</view>
					<view class="detail-close" @click="closeDepartmentDetail">
						<text class="iconfont icon-close"></text>
					</view>
				</view>
				<view class="detail-content">
					<view class="department-info">
						<view class="info-item">
							<text class="info-label">科室介绍</text>
							<text class="info-value">{{ selectedDepartment.introduction }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">诊疗范围</text>
							<text class="info-value">{{ selectedDepartment.scope }}</text>
						</view>
						<view class="info-item">
							<text class="info-label">位置</text>
							<text class="info-value">{{ selectedDepartment.location }}</text>
						</view>
					</view>
					<view class="doctors-section">
						<view class="doctors-title">科室医生</view>
						<view class="doctors-list">
							<view class="doctor-item" v-for="doctor in selectedDepartment.doctors" :key="doctor.id" @click="selectDoctor(doctor)">
								<image class="doctor-avatar" :src="doctor.avatar" mode="aspectFill"></image>
								<view class="doctor-info">
									<view class="doctor-name">{{ doctor.name }}</view>
									<view class="doctor-title">{{ doctor.title }}</view>
									<view class="doctor-specialty">{{ doctor.specialty }}</view>
								</view>
								<view class="doctor-status">
									<view class="status-text" :class="doctor.status">{{ getStatusText(doctor.status) }}</view>
									<view class="available-slots" v-if="doctor.availableSlots">{{ doctor.availableSlots }}个号源</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="detail-actions">
					<button class="btn-outline" @click="showDepartmentRoute">科室导航</button>
					<button class="btn-primary" @click="quickAppointment">立即挂号</button>
				</view>
			</view>
		</uni-popup>

		<!-- 医生详情弹窗 -->
		<uni-popup ref="doctorPopup" type="bottom">
			<view class="doctor-detail" v-if="selectedDoctor">
				<view class="detail-header">
					<view class="detail-title">{{ selectedDoctor.name }}</view>
					<view class="detail-close" @click="closeDoctorDetail">
						<text class="iconfont icon-close"></text>
					</view>
				</view>
				<view class="detail-content">
					<view class="doctor-profile">
						<image class="doctor-large-avatar" :src="selectedDoctor.avatar" mode="aspectFill"></image>
						<view class="doctor-details">
							<view class="doctor-title">{{ selectedDoctor.title }}</view>
							<view class="doctor-department">{{ selectedDoctor.departmentName }}</view>
							<view class="doctor-specialty">{{ selectedDoctor.specialty }}</view>
							<view class="doctor-experience">从医{{ selectedDoctor.experience }}年</view>
						</view>
					</view>
					<view class="doctor-introduction">
						<text class="intro-label">医生简介</text>
						<text class="intro-content">{{ selectedDoctor.introduction }}</text>
					</view>
					<view class="available-times">
						<view class="times-title">可预约时间</view>
						<view class="date-tabs">
							<view 
								class="date-tab" 
								v-for="date in availableDates" 
								:key="date.date"
								:class="{ 'active': selectedDate === date.date }"
								@click="selectDate(date.date)"
							>
								<view class="tab-date">{{ formatShortDate(date.date) }}</view>
								<view class="tab-day">{{ date.dayName }}</view>
								<view class="tab-count">{{ date.availableCount }}个号</view>
							</view>
						</view>
						<view class="time-slots">
							<view 
								class="time-slot" 
								v-for="slot in currentTimeSlots" 
								:key="slot.id"
								:class="{ 'active': selectedTimeSlot === slot.id, 'disabled': !slot.available }"
								@click="selectTimeSlot(slot)"
							>
								<view class="slot-time">{{ slot.time }}</view>
								<view class="slot-type">{{ slot.type }}</view>
								<view class="slot-fee">¥{{ slot.fee }}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="detail-actions">
					<button class="btn-outline" @click="addToFavorites">收藏医生</button>
					<button class="btn-primary" @click="confirmAppointment" :disabled="!canConfirmAppointment">确认挂号</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
	name: 'AppointmentPage',
	data() {
		return {
			searchKeyword: '',
			showSearchResults: false,
			searchResults: [],
			currentCategory: 'internal',
			selectedDepartment: null,
			selectedDoctor: null,
			selectedDate: '',
			selectedTimeSlot: '',
			searchTimer: null,
			departmentCategories: [
				{ id: 'internal', name: '内科' },
				{ id: 'surgical', name: '外科' },
				{ id: 'gynecology', name: '妇产科' },
				{ id: 'pediatrics', name: '儿科' },
				{ id: 'emergency', name: '急诊科' },
				{ id: 'other', name: '其他' }
			],
			quickDepartments: [
				{
					id: 'cardiology',
					name: '心内科',
					icon: 'icon-heart',
					color: '#FF3B30',
					status: 'available'
				},
				{
					id: 'neurology',
					name: '神经内科',
					icon: 'icon-brain',
					color: '#007AFF',
					status: 'busy'
				},
				{
					id: 'orthopedics',
					name: '骨科',
					icon: 'icon-bone',
					color: '#34C759',
					status: 'available'
				},
				{
					id: 'emergency',
					name: '急诊科',
					icon: 'icon-emergency',
					color: '#FF9500',
					status: 'available'
				}
			]
		}
	},
	computed: {
		...mapState('appointment', [
			'departments', 
			'myAppointments', 
			'todayReminders', 
			'availableDates',
			'currentTimeSlots'
		]),
		currentDepartments() {
			return this.departments.filter(dept => dept.category === this.currentCategory)
		},
		canConfirmAppointment() {
			return this.selectedDoctor && this.selectedDate && this.selectedTimeSlot
		}
	},
	onLoad() {
		this.initPage()
	},
	onShow() {
		this.refreshData()
	},
	onPullDownRefresh() {
		this.refreshData().finally(() => {
			uni.stopPullDownRefresh()
		})
	},
	methods: {
		...mapActions('appointment', [
			'loadDepartments',
			'loadMyAppointments', 
			'loadTodayReminders',
			'searchDoctorsAndDepartments',
			'loadDoctorAvailability',
			'createAppointment'
		]),

		async initPage() {
			await this.loadInitialData()
		},

		async loadInitialData() {
			try {
				await Promise.all([
					this.loadDepartments(),
					this.loadMyAppointments(),
					this.loadTodayReminders()
				])
			} catch (error) {
				console.error('数据加载失败:', error)
				uni.showToast({
					title: '数据加载失败',
					icon: 'none'
				})
			}
		},

		async refreshData() {
			await this.loadInitialData()
		},

		// 搜索功能
		onSearchInput() {
			this.clearSearchTimer()
			this.searchTimer = setTimeout(() => {
				this.performSearch()
			}, 300)
		},

		async performSearch() {
			if (!this.searchKeyword.trim()) {
				this.showSearchResults = false
				return
			}

			this.showSearchResults = true
			try {
				this.searchResults = await this.searchDoctorsAndDepartments({
					keyword: this.searchKeyword
				})
			} catch (error) {
				console.error('搜索失败:', error)
				this.searchResults = []
			}
		},

		clearSearch() {
			this.searchKeyword = ''
			this.showSearchResults = false
			this.searchResults = []
		},

		clearSearchTimer() {
			if (this.searchTimer) {
				clearTimeout(this.searchTimer)
				this.searchTimer = null
			}
		},

		// 科室选择
		switchCategory(categoryId) {
			this.currentCategory = categoryId
		},

		selectDepartment(department) {
			this.selectedDepartment = department
			this.$refs.departmentPopup.open()
		},

		closeDepartmentDetail() {
			this.$refs.departmentPopup.close()
		},

		selectSearchResult(result) {
			if (result.type === 'department') {
				this.selectDepartment(result)
			} else if (result.type === 'doctor') {
				this.selectDoctor(result)
			}
			this.clearSearch()
		},

		// 医生选择
		async selectDoctor(doctor) {
			this.selectedDoctor = doctor
			await this.loadDoctorAvailability(doctor.id)
			this.$refs.doctorPopup.open()
			
			// 如果有部门弹窗打开，先关闭
			if (this.$refs.departmentPopup) {
				this.$refs.departmentPopup.close()
			}
		},

		closeDoctorDetail() {
			this.$refs.doctorPopup.close()
		},

		// 时间选择
		selectDate(date) {
			this.selectedDate = date
			this.selectedTimeSlot = ''
		},

		selectTimeSlot(slot) {
			if (!slot.available) return
			this.selectedTimeSlot = slot.id
		},

		// 预约确认
		async confirmAppointment() {
			if (!this.canConfirmAppointment) return

			try {
				uni.showLoading({ title: '预约中...' })
				
				const appointmentData = {
					doctorId: this.selectedDoctor.id,
					date: this.selectedDate,
					timeSlotId: this.selectedTimeSlot,
					departmentId: this.selectedDoctor.departmentId
				}

				await this.createAppointment(appointmentData)
				
				uni.hideLoading()
				uni.showToast({
					title: '预约成功',
					icon: 'success'
				})

				this.closeDoctorDetail()
				this.refreshData()
				
			} catch (error) {
				uni.hideLoading()
				uni.showToast({
					title: error.message || '预约失败',
					icon: 'none'
				})
			}
		},

		// 快捷操作
		quickAppointment() {
			// 快速挂号逻辑
			if (this.selectedDepartment && this.selectedDepartment.doctors.length > 0) {
				this.selectDoctor(this.selectedDepartment.doctors[0])
			}
		},

		showDepartmentRoute() {
			// 显示科室导航
			uni.navigateTo({
				url: `/pages/navigation/index?target=${this.selectedDepartment.id}`
			})
		},

		addToFavorites() {
			// 收藏医生
			uni.showToast({
				title: '已收藏',
				icon: 'success'
			})
		},

		// 我的预约
		viewAllAppointments() {
			uni.navigateTo({
				url: '/pages/appointment/list'
			})
		},

		viewAppointmentDetail(appointment) {
			uni.navigateTo({
				url: `/pages/appointment/detail?id=${appointment.id}`
			})
		},

		// 提醒处理
		handleReminder(reminder) {
			switch (reminder.type) {
				case 'appointment':
					this.viewAppointmentDetail({ id: reminder.appointmentId })
					break
				case 'medicine':
					uni.navigateTo({
						url: '/pages/services/pharmacy'
					})
					break
				case 'checkup':
					uni.navigateTo({
						url: '/pages/services/checkup'
					})
					break
			}
		},

		// 工具方法
		getStatusText(status) {
			const statusMap = {
				'available': '可预约',
				'busy': '繁忙',
				'full': '已满',
				'closed': '停诊'
			}
			return statusMap[status] || status
		},

		getAppointmentStatusText(status) {
			const statusMap = {
				'pending': '待就诊',
				'confirmed': '已确认',
				'completed': '已完成',
				'cancelled': '已取消'
			}
			return statusMap[status] || status
		},

		getReminderIcon(type) {
			const iconMap = {
				'appointment': 'icon-calendar',
				'medicine': 'icon-pill',
				'checkup': 'icon-stethoscope'
			}
			return iconMap[type] || 'icon-bell'
		},

		formatDate(date) {
			const d = new Date(date)
			return `${d.getMonth() + 1}月${d.getDate()}日`
		},

		formatShortDate(date) {
			const d = new Date(date)
			const today = new Date()
			const tomorrow = new Date(today)
			tomorrow.setDate(tomorrow.getDate() + 1)

			if (d.toDateString() === today.toDateString()) {
				return '今天'
			} else if (d.toDateString() === tomorrow.toDateString()) {
				return '明天'
			} else {
				return `${d.getMonth() + 1}/${d.getDate()}`
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.appointment-container {
	background-color: #f8f9fa;
	min-height: 100vh;
}

.search-section {
	background: white;
	padding: 24rpx;
	
	.search-bar {
		display: flex;
		align-items: center;
		background: #f8f9fa;
		border-radius: 24rpx;
		padding: 16rpx 24rpx;
		gap: 16rpx;
		
		.icon-search {
			color: #999;
			font-size: 28rpx;
		}
		
		.search-input {
			flex: 1;
			font-size: 28rpx;
			color: #333;
		}
		
		.icon-clear {
			color: #999;
			font-size: 28rpx;
		}
	}
}

.section-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #1a1a1a;
	margin-bottom: 24rpx;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 24rpx;
	
	.more-btn {
		display: flex;
		align-items: center;
		gap: 8rpx;
		color: #007AFF;
		font-size: 24rpx;
	}
}

.quick-appointment {
	background: white;
	padding: 32rpx 24rpx;
	margin-bottom: 16rpx;
	
	.quick-grid {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		gap: 24rpx;
	}
	
	.quick-item {
		text-align: center;
		
		.quick-icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 16rpx;
			margin: 0 auto 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			font-size: 32rpx;
		}
		
		.quick-name {
			font-size: 24rpx;
			color: #1a1a1a;
			margin-bottom: 8rpx;
		}
		
		.quick-status {
			font-size: 20rpx;
			padding: 4rpx 12rpx;
			border-radius: 8rpx;
			
			&.available {
				background: #e8f5e8;
				color: #34C759;
			}
			
			&.busy {
				background: #fff3e0;
				color: #FF9500;
			}
			
			&.full {
				background: #ffebee;
				color: #FF3B30;
			}
		}
	}
}

.search-results {
	background: white;
	margin-bottom: 16rpx;
	
	.results-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx;
		border-bottom: 1rpx solid #f0f0f0;
		
		.results-title {
			font-size: 28rpx;
			font-weight: 600;
			color: #1a1a1a;
		}
		
		.results-count {
			font-size: 24rpx;
			color: #666;
		}
	}
	
	.results-list {
		padding: 0 24rpx;
	}
	
	.result-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
		
		&:last-child {
			border-bottom: none;
		}
		
		.result-info {
			flex: 1;
			
			.result-name {
				font-size: 28rpx;
				color: #1a1a1a;
				font-weight: 500;
				margin-bottom: 8rpx;
			}
			
			.result-desc {
				font-size: 24rpx;
				color: #666;
				margin-bottom: 8rpx;
			}
			
			.result-tags {
				display: flex;
				gap: 8rpx;
				
				.tag {
					padding: 4rpx 12rpx;
					background: #f0f9ff;
					color: #007AFF;
					font-size: 20rpx;
					border-radius: 8rpx;
				}
			}
		}
		
		.result-action {
			text-align: right;
			
			.result-status {
				font-size: 20rpx;
				margin-bottom: 8rpx;
			}
			
			.iconfont {
				color: #007AFF;
				font-size: 24rpx;
			}
		}
	}
}

.department-section {
	background: white;
	padding: 32rpx 24rpx;
	margin-bottom: 16rpx;
	
	.category-tabs {
		display: flex;
		gap: 16rpx;
		margin-bottom: 32rpx;
		
		.category-tab {
			padding: 16rpx 24rpx;
			background: #f8f9fa;
			color: #666;
			font-size: 24rpx;
			border-radius: 24rpx;
			white-space: nowrap;
			
			&.active {
				background: #007AFF;
				color: white;
			}
		}
	}
	
	.department-list {
		.department-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 24rpx 0;
			border-bottom: 1rpx solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			.dept-info {
				flex: 1;
				
				.dept-name {
					font-size: 28rpx;
					color: #1a1a1a;
					font-weight: 500;
					margin-bottom: 8rpx;
				}
				
				.dept-desc {
					font-size: 24rpx;
					color: #666;
					margin-bottom: 8rpx;
				}
				
				.dept-stats {
					display: flex;
					gap: 24rpx;
					
					.stat-item {
						font-size: 20rpx;
						color: #999;
					}
				}
			}
			
			.dept-status {
				text-align: right;
				
				.status-badge {
					font-size: 20rpx;
					padding: 4rpx 12rpx;
					border-radius: 8rpx;
					margin-bottom: 8rpx;
					
					&.available {
						background: #e8f5e8;
						color: #34C759;
					}
					
					&.busy {
						background: #fff3e0;
						color: #FF9500;
					}
				}
				
				.wait-time {
					font-size: 20rpx;
					color: #666;
				}
			}
		}
	}
}

.my-appointments {
	background: white;
	padding: 32rpx 24rpx;
	margin-bottom: 16rpx;
	
	.appointment-list {
		.appointment-item {
			display: flex;
			align-items: center;
			gap: 24rpx;
			padding: 24rpx 0;
			border-bottom: 1rpx solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			.appointment-time {
				text-align: center;
				min-width: 120rpx;
				
				.date {
					font-size: 24rpx;
					color: #1a1a1a;
					font-weight: 500;
					margin-bottom: 4rpx;
				}
				
				.time {
					font-size: 20rpx;
					color: #666;
				}
			}
			
			.appointment-info {
				flex: 1;
				
				.doctor-name {
					font-size: 28rpx;
					color: #1a1a1a;
					font-weight: 500;
					margin-bottom: 8rpx;
				}
				
				.department {
					font-size: 24rpx;
					color: #666;
					margin-bottom: 4rpx;
				}
				
				.location {
					font-size: 20rpx;
					color: #999;
				}
			}
			
			.appointment-status {
				font-size: 20rpx;
				padding: 8rpx 16rpx;
				border-radius: 12rpx;
				
				&.pending {
					background: #fff3e0;
					color: #FF9500;
				}
				
				&.confirmed {
					background: #e8f5e8;
					color: #34C759;
				}
			}
		}
	}
}

.reminder-section {
	background: white;
	padding: 32rpx 24rpx;
	margin-bottom: 16rpx;
	
	.reminder-list {
		.reminder-item {
			display: flex;
			align-items: center;
			gap: 24rpx;
			padding: 24rpx 0;
			border-bottom: 1rpx solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			.reminder-icon {
				width: 64rpx;
				height: 64rpx;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: white;
				font-size: 28rpx;
				
				&.appointment {
					background: #007AFF;
				}
				
				&.medicine {
					background: #34C759;
				}
				
				&.checkup {
					background: #FF9500;
				}
			}
			
			.reminder-content {
				flex: 1;
				
				.reminder-title {
					font-size: 28rpx;
					color: #1a1a1a;
					font-weight: 500;
					margin-bottom: 8rpx;
				}
				
				.reminder-desc {
					font-size: 24rpx;
					color: #666;
					margin-bottom: 4rpx;
				}
				
				.reminder-time {
					font-size: 20rpx;
					color: #999;
				}
			}
			
			.reminder-action {
				display: flex;
				align-items: center;
				gap: 8rpx;
				color: #007AFF;
				
				.action-text {
					font-size: 24rpx;
				}
				
				.iconfont {
					font-size: 24rpx;
				}
			}
		}
	}
}

.department-detail,
.doctor-detail {
	background: white;
	border-radius: 24rpx 24rpx 0 0;
	max-height: 80vh;
	
	.detail-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx;
		border-bottom: 1rpx solid #f0f0f0;
		
		.detail-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #1a1a1a;
		}
		
		.detail-close {
			color: #666;
			font-size: 32rpx;
		}
	}
	
	.detail-content {
		padding: 32rpx;
		max-height: 60vh;
		overflow-y: auto;
	}
	
	.detail-actions {
		display: flex;
		gap: 16rpx;
		padding: 32rpx;
		border-top: 1rpx solid #f0f0f0;
		
		.btn-outline {
			flex: 1;
			padding: 24rpx;
			background: transparent;
			color: #007AFF;
			border: 2rpx solid #007AFF;
			border-radius: 16rpx;
			font-size: 28rpx;
		}
		
		.btn-primary {
			flex: 2;
			padding: 24rpx;
			background: #007AFF;
			color: white;
			border: none;
			border-radius: 16rpx;
			font-size: 28rpx;
			
			&:disabled {
				background: #ddd;
				color: #999;
			}
		}
	}
}

.department-info {
	margin-bottom: 32rpx;
	
	.info-item {
		margin-bottom: 24rpx;
		
		.info-label {
			font-size: 24rpx;
			color: #666;
			margin-bottom: 8rpx;
			display: block;
		}
		
		.info-value {
			font-size: 28rpx;
			color: #1a1a1a;
			line-height: 1.6;
		}
	}
}

.doctors-section {
	.doctors-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #1a1a1a;
		margin-bottom: 24rpx;
	}
	
	.doctors-list {
		.doctor-item {
			display: flex;
			align-items: center;
			gap: 24rpx;
			padding: 24rpx 0;
			border-bottom: 1rpx solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			.doctor-avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 12rpx;
			}
			
			.doctor-info {
				flex: 1;
				
				.doctor-name {
					font-size: 28rpx;
					color: #1a1a1a;
					font-weight: 500;
					margin-bottom: 8rpx;
				}
				
				.doctor-title {
					font-size: 24rpx;
					color: #666;
					margin-bottom: 4rpx;
				}
				
				.doctor-specialty {
					font-size: 20rpx;
					color: #999;
				}
			}
			
			.doctor-status {
				text-align: right;
				
				.status-text {
					font-size: 20rpx;
					margin-bottom: 4rpx;
					
					&.available {
						color: #34C759;
					}
					
					&.busy {
						color: #FF9500;
					}
				}
				
				.available-slots {
					font-size: 20rpx;
					color: #666;
				}
			}
		}
	}
}

.doctor-profile {
	display: flex;
	gap: 24rpx;
	margin-bottom: 32rpx;
	
	.doctor-large-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 16rpx;
	}
	
	.doctor-details {
		flex: 1;
		
		.doctor-title {
			font-size: 28rpx;
			color: #1a1a1a;
			font-weight: 500;
			margin-bottom: 8rpx;
		}
		
		.doctor-department {
			font-size: 24rpx;
			color: #666;
			margin-bottom: 8rpx;
		}
		
		.doctor-specialty {
			font-size: 24rpx;
			color: #007AFF;
			margin-bottom: 8rpx;
		}
		
		.doctor-experience {
			font-size: 20rpx;
			color: #999;
		}
	}
}

.doctor-introduction {
	margin-bottom: 32rpx;
	
	.intro-label {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 12rpx;
		display: block;
	}
	
	.intro-content {
		font-size: 28rpx;
		color: #1a1a1a;
		line-height: 1.6;
	}
}

.available-times {
	.times-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #1a1a1a;
		margin-bottom: 24rpx;
	}
	
	.date-tabs {
		display: flex;
		gap: 16rpx;
		margin-bottom: 24rpx;
		overflow-x: auto;
		
		.date-tab {
			flex-shrink: 0;
			text-align: center;
			padding: 16rpx;
			border: 2rpx solid #f0f0f0;
			border-radius: 12rpx;
			min-width: 120rpx;
			
			&.active {
				border-color: #007AFF;
				background: #f0f9ff;
			}
			
			.tab-date {
				font-size: 24rpx;
				color: #1a1a1a;
				font-weight: 500;
				margin-bottom: 4rpx;
			}
			
			.tab-day {
				font-size: 20rpx;
				color: #666;
				margin-bottom: 4rpx;
			}
			
			.tab-count {
				font-size: 20rpx;
				color: #007AFF;
			}
		}
	}
	
	.time-slots {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16rpx;
		
		.time-slot {
			padding: 24rpx;
			border: 2rpx solid #f0f0f0;
			border-radius: 12rpx;
			text-align: center;
			
			&.active {
				border-color: #007AFF;
				background: #f0f9ff;
			}
			
			&.disabled {
				opacity: 0.5;
				background: #f8f9fa;
			}
			
			.slot-time {
				font-size: 28rpx;
				color: #1a1a1a;
				font-weight: 500;
				margin-bottom: 8rpx;
			}
			
			.slot-type {
				font-size: 20rpx;
				color: #666;
				margin-bottom: 4rpx;
			}
			
			.slot-fee {
				font-size: 24rpx;
				color: #FF9500;
				font-weight: 500;
			}
		}
	}
}
</style> 